<template>
  <div id="app">
    <store-header v-bind:store="store"
      v-on:show-store-info="showStoreInfo"></store-header>
    <tabs></tabs>
    <router-view></router-view>

    <popup v-if="isShowPopup" v-on:close="isShowPopup = false">
      <store v-bind:store="store"></store>
    </popup>
  </div>
</template>

<script>
import StoreHeader from 'components/StoreHeader'
import Tabs from 'components/Tabs'
import Popup from 'components/Popup'
import Store from 'components/Store'

export default {
  name: 'App',

  components: {
    StoreHeader,
    Tabs,
    Popup,
    Store
  },

  data() {
    return {
      store: {},
      isShowPopup: false
    }
  },

  mounted() {
    this.$http.get('/api/store').then((response) => {
      // console.log('response', response)
      let res = response.data
      if (res.error) {
        console.log('error', res)
      }
      else {
        // console.log('success', res)
        this.store = res.data
      }
    })
  },

  methods: {
    showStoreInfo(store) {
      this.isShowPopup = true
      console.log('showStoreInfo', store)
    }
  }
}
</script>

<style lang="less">
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}

a {
  text-decoration: none;
  color: #333;
}
</style>
